<template>
  <div>
    <el-row class="top_category">
      <el-col></el-col>
      <el-col :span="1" :offset="3">
        <div>
          <el-image src="http://s02.mifile.cn/assets/static/image/mi-logo.png" class="category_icon"></el-image>
        </div>
      </el-col>
      <div v-for="(item,index) in getCategoryListInfo" :key="index" v-bind:class="{click_active: isActive}">
        <el-col  :span="2" :offset="item.offset">
          <div @click="categoryItemBtnClick(index)"><el-link :underline="false" class="item_link">{{item.categoryName}}</el-link></div>
        </el-col>
      </div>


      <el-col :span="5" :offset="2">
        <el-input placeholder="搜索商品" v-model="queryShop">
          <el-button slot="append" icon="el-icon-search" @click="queryShopByName"></el-button>
        </el-input>
      </el-col>
    </el-row>
  </div>

</template>

<script>
  import {product} from "../../network/product";

  export default {
    name: "TopCategory",
    data(){
      return{
        // topCategory: 写死的数据
        // [
        //   {name: '小米手机', offset: 1,},{name: 'Redmi 红米', offset: 0,},{name: '电视', offset: 0,},{name: '笔记本', offset: 0,},{name: '家电', offset: 0,}
        // ],
        queryShop: '小米11',
        productListInfo: [],
        getCategoryListInfo: [
          {
            categoryId: "1382257431425347585",
            categoryName: "小米手机",
            offset : 1,
          },
          {
            categoryId: "1382257915733241857",
            categoryName: "Redmi 手机",
            offset : 0,
          },
          {
            categoryId: "1382258020481818626",
            categoryName: "电视",
            offset : 0,
          },
          {
            categoryId: "1382258062441635842",
            categoryName: "笔记本",
            offset : 0,
          },
          {
            categoryId: "1382258125150674945",
            categoryName: "家电",
            offset : 0,
          }
        ],
        xiaomiProductList: [],
        isActive: true
      }
    },
   created() {
      //在组件被创建的时候， 就要发送网络请求
      let that = this;
      const list = this.getCategoryListInfo;
     for(let i = 0; i < list.length; i++){
       // console.log(list[i].categoryId);
       product({
         url: '/product/getProductByCategoryId',
         params:{
           categoryId: list[i].categoryId,
         }
       }).then(res=>{
         if(i === 0){
           //存储到vuex中
           this.$store.commit('changeProductList', res.data.data);
           this.$store.commit('changeProductList', res.data.data);
         }
         that.productListInfo[i] = res.data.data;
       })
     }
    },

    methods:{
      queryShopByName(){
        console.log(this.queryShop);
        console.log(this.getCategoryListInfo);
        this.$router.push('/index/test');
      },

      categoryItemBtnClick(index){
          //每次点击，跳转 /index路由

        this.$router.push({
          path: '/index',
        });
        //更新商品的数据到vuex里面
        this.$store.commit('changeProductList', this.productListInfo[index]);
        this.$store.commit('changeCategoryName', this.getCategoryListInfo[index].categoryName);
        let that = this;
        // console.log(this.$store.state.productList);

      }

      }
  }
</script>

<style scoped>
  .top_category{
    height: 100px;
    line-height: 100px;
    border-bottom: 2px solid #E0E0E0;
  }
   .category_icon{
     margin-top: 20px;
    background-color:  #FF6700;
    width: 55px;
    height: 55px;
  }
  .item_link:hover, .click_active{
    color: #FF6700;
  }

  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>
